<template>
	<view style="background-color: #f6fafd">
		<view style="background-color: rgba(255, 255, 255, 1);">
			<image :src="orderItem.image" mode="" style="width: 750rpx; height: 580rpx;"></image>
			<view class=" order-span">
			<text style="font-weight: 500;font-style: normal;font-size: 36rpx;line-height: 56rpx; padding-left: 20rpx;">{{orderItem.name}}</text>
			<text style="font-style: normal;color: #FA746B; line-height: 56rpx;font-size: 36rpx; padding-right: 20rpx;" >￥{{orderItem.price}}</text>
			</view>
			<view style="display: flex;" v-for="tag in orderItem.tagIds" :key="tag._id"  >
				<!-- <up-tag :text="tag.name" size="large"  :circle="true" :inverted="true" style="width: 176rpx; height: 64rpx;background-color: rgba(250, 116, 107, 0.2);"></up-tag> -->
				<view style="width: 176rpx; height: 64rpx;background-color: rgba(250, 116, 107, 0.2); margin: 20rpx;  border-radius: 20rpx; line-height: 64rpx;  text-align: center; ">
					<text style=" color: #FA746B;font-size: 14px;">{{tag.name }}</text>
				</view>
			</view>
		</view>
		<!-- 这有一段空格 -->
		<view style="width: 100%; height: 20rpx;">
		</view>
		<view style="background-color: rgba(255, 255, 255, 1);">
			<view>
			<view style="font-weight: 500;font-style: normal;font-size: 36rpx;line-height: 56rpx; padding-left: 20rpx; padding-bottom: 20rpx;">服务对象</view>
			<text class="Item-span">{{orderItem.client}}</text>
			</view>
			<!--  服务介绍-->
			<view style="padding-left: 20rpx; padding-right: 20rpx; margin-top: 40rpx;">
				<view style="font-weight: 500;font-style: normal;font-size: 36rpx;line-height: 56rpx;  padding-bottom: 20rpx;">服务介绍</view>
				<text class="Item-span-1" style="text-align: left">{{orderItem.intro}}</text>
			</view>
			
			<!--  服务项目-->
			<view style="font-weight: 500;font-style: normal;font-size: 36rpx;line-height: 56rpx;  padding-bottom: 20rpx;">服务项目</view>
			<view v-for="ser in orderItem.serviceItemIds" style="padding-left: 20rpx; padding-right: 20rpx; margin-top: 40rpx;"> 
				<view class="ser-time">	
				<text class="project-name">{{ser.name}}</text>
				<text class="ser-count" >{{ser.count}}次</text>
				</view>
			</view>
			 <!--  -->
			 <view style="padding-left: 20rpx; padding-right: 20rpx; margin-top: 40rpx; margin-bottom: 50rpx; ">
			 <view >
				 <view  style="font-weight: 500;font-style: normal;font-size: 36rpx;line-height: 56rpx;  padding-bottom: 20rpx;">服务周期</view>
				 <text  class="Item-span-1" style=" margin-bottom: 50rpx;"> {{orderItem.period}}可续签</text>
			 </view>
			 </view>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import { getOrderDetailApi } from '../../../api/order-service';
import { ref } from 'vue';
	
	const orderItem=ref({})
		onLoad((options)=>{
			getOrderDetail (options._id)
		})
	function getOrderDetail (options){
		getOrderDetailApi({
			_id:options
		}).then(res => {
				if (res.code == 200) {
					orderItem.value = res.data;
				}
			})
	}
	
</script>

<style>
.order-span{
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding-top: 40rpx;
	padding-bottom: 40rpx;
}
.Item-span{
	    font-family: 'PingFangSC-Regular', 'PingFang SC';
	    font-weight: 400;
	    font-style: normal;
	    font-size: 14px;
	    text-align: left;
		color: #999999;
		line-height: 24px;
		padding-left: 20rpx;
}
.Item-span-1{
	    font-family: 'PingFangSC-Regular', 'PingFang SC';
	    font-weight: 400;
	    font-style: normal;
	    font-size: 14px;
	    text-align: left;
		color: #999999;
		line-height: 24px;
		
}
.project-name{
	    text-align: left;
		font-size: 14px;
		
}
.ser-count{
	color:#2984F8 ;
	
	    font-family: 'PingFangSC-Regular', 'PingFang SC';
	    font-weight: 400;
	    font-style: normal;
	    font-size: 14px;
		padding-right: 200rpx;
	
}
.ser-time{
	display: flex;
	width: 700rpx;
	height: 86rpx;
	justify-content: space-between;
	border-bottom: 2rpx dashed #999999;
}
</style>
